@extends("admin.layout.main")
@section("content")
    <div id="app" >
        {{--按钮栏--}}
        <Row type="flex"  align="middle">
            <Spin size="large" fix v-if="spinShow"></Spin>
            <i-col span="35" style="margin: 20px ;">
                <span>
                    &nbsp;&nbsp;mid:
                   <i-input style="width: 200px" v-model="search.mid"></i-input>
                </span>

                <span>
                    &nbsp;&nbsp;名称:
                   <i-input style="width: 200px" v-model="search.name"></i-input>
                </span>
                <span>
                    <i-button type="primary" @click="getData(1)">查询</i-button>
                </span>

            </i-col>
        </Row>
        <Row type="flex" justify="center" align="middle">
            <i-col span="23" style="margin-top: 20px">
                <i-table  :data="tableData" :columns="tableColumns" stripe
                          style="width: 100% !important;"  @on-sort-change="changeSort" >
                </i-table>
            </i-col>
        </Row>
        <Row type="flex" justify="center" class="code-row-bg">
            <i-col>
                <Page
                        size="small"
                        :total="page.total"
                        :current="page.current"
                        :page-size="page.pageSize"
                        show-total
                        show-elevator
                        @on-change="getData">

                </Page>
            </i-col>
        </Row>

    </div>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    search:{
                        mid:'',
                        name:''
                    },
                    key:"fans",
                    order:'desc',
                    tableData:[],
                    tableCount:[],
                    page:{
                        total:0,
                        current:1,
                        pageSize:30
                    },
                    spinShow:false,
                    tableColumns: [
                        {
                            title: '序号',
                            key:'id',
                            width:80
                        },
                        {
                            title: '名称',
                            key:'name',
                            render(h,param){
                                return h('a', {
                                    attrs: {
                                        href: 'https://space.bilibili.com/'+param.row.mid,
                                        targer:'_blank'
                                    }
                                },param.row.name,);
                            }
                        },
                        {
                            title: '头像',
                            render(h,param){
                                let row = param.row;
                                let img = row.face;
                                return h('img', {
                                    attrs: {
                                        src: img,
                                    },
                                    style: {
                                        'max-width':'80px',
                                    }
                                });
                            }
                        },

                        {
                            title: '介绍',
                            key:'sign'

                        },
                        {
                            title: '粉丝',
                            key:'fans',
                            sortable: 'true',

                        },
                        {
                            title: '等级',
                            key:'level',
                            sortable: 'true',
                        },
                        {
                            title: '性别',
                            key:'sex',
                        },
                        {
                            title: '官方认证',
                            key:'official',
                        },
                        {
                            title: '分类',
                            key:'cate',
                        }

                    ],
                };
            },
            mounted(){
                this.token = window.localStorage.getItem('current_user');
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            methods: {
                getData (page = 1) {
                    this.spinShow = true;
                    axios.get("/admin/media/bliuper/data", {
                        params: {
                            token:vm.token,
                            mid: this.search.mid,
                            name: this.search.name,
                            key:this.key,
                            order:this.order,
                            page:page
                        }
                    })
                    .then(function (response) {
                        result = response.data.result;
                        let data    =   [];
                        let index   =   page;
                        if(page >   1){
                            index   =   (page-1)*30+1;
                        }
                        result.data.map((obj,key)=>{
                            obj.id  =   index;
                            data.push(obj);
                            index++;
                        });
                        vm.tableData = data;
                        vm.page.total = result.total;
                        vm.page.current = result.current_page;
                        vm.spinShow = false;
                    })
                    .catch(function (error) {
                        vm.$Message.error('服务器异常');
                    });
                },
                changeSort(param){
                    this.key = param.key;
                    this.order = param.order;
                    this.getData(1);
                }
            }


        });
        vm.getData()
    </script>
@endsection